$(function(){
    if (pre_componets){
      schemaJson = pre_componets
    }
    // components['serialNo'] = {
    //   title: 'Serial Number',
    //   key: 'serialNo',
    //   icon: 'terminal',
    //   schema: {
    //     label: 'Serial Number',
    //     type: 'textfield',
    //     key: 'serialNo',
    //     input: true,
    //     cssClass:'c1 c2',
    //     customerattr:123
    //   }
    // }
    const builderConfing = {
      noDefaultSubmitButton: true ,
        builder: {
          // customBasic: {
          //   title: 'Work Order Component',
          //   weight: 0,
          //   components: components
          // },
          basic: {
              components:{
                  button:0,
                  password:0,
              }
          },
          data: false,
          premium:false,
          advanced: {
              components: {
                  email:0,
                  phoneNumber:0,
                  tags:0,
                  address:0,
                  currency:0,
                  survey:0,
                  url:0,
              }
          },
          layout: {
            components: {
                tabs:0,
                fieldset:0,
                htmlelement:0
            }
          }
      },
      editForm: {
        // textfield: [
        //   {
        //     key: 'api',
        //     ignore: true
        //   }        
        // ]
      }
    }
    Formio.builder(document.getElementById('builder'),schemaJson,builderConfing).then(function(builder) {
        builder.on('saveComponent', function() {
            //TODO: save the schemabui
          console.log(JSON.stringify(builder.schema));
          
        });

        $('#btn-create-form').on('click',_=>{
          form = $('#submitForm')
          console.log(JSON.stringify(builder.schema))
          dataJson = $("#dataJson").val(JSON.stringify(builder.schema))
          // return
          form.submit()
        })

        
      });
})